<template>
	<view class="page">
		<view class="box">
			<view id="box" class="box-view" v-if="!dataURL">
				<view class="head">
					<img :src="avatar" mode="" />
					<view class="right">
						<view>{{ nickname }}</view>
						<view>邀请您注册{{name}}</view>
					</view>
				</view>
				<img class="image" :src="h5_img" mode=""></img>
				<img class="qrcode" :src="uqcode" mode="" />
			</view>
			<img v-if="dataURL" class="dataURL" :src="dataURL" mode=""></img>
		</view>

		<view class="font">
			<view>长按保存图片</view>
			<view>分享图片给您好友注册下单即获得奖励</view>
		</view>
		<!--  -->

	</view>
</template>

<script>
	import html2canvas from 'html2canvas';
	export default {
		data() {
			return {
				nickname:'',
				show_poster: false, //显示海报
				path: '', //生成的图片地址
				posterObj: {},
				footer_arr: [], //底部选项
				check_idx: 0, //底部选中的下标
				type:0,
				uqcode:'https://ryjdshop.oss-cn-beijing.aliyuncs.com/admin/202210/202210281822300135311.png',
				avatar: 'https://ryjdshop.oss-cn-beijing.aliyuncs.com/admin/202210/202210281822300135311.png',
				dataURL: '',
				name:'',

				h5_img:'https://ryjdshop.oss-cn-beijing.aliyuncs.com/admin/202211/202211022243570128071.jpg'
			}
		},
		async onLoad(e) {

			uni.showLoading({
				title:"海报生成中"
			})
			await this.getConfig()
			if(e){
				this.type = e.type
			}
			await this.$http.post('api/user/userInfo').then(res => {
				let {
					id,
					nickname,
					avatar
				} = res;
				this.id = id
				this.nickname = nickname
				this.avatar = avatar

			});

			if (this.type == 0) {
				this.url = "/h5/"
			} else {
				this.url = 'pages/index/index'
			}
			await this.$http.post('api/distribution/getQrcode', {
				url: this.url,
				type: this.type,
			}).then(res => {
				console.log(res)
				this.uqcode = res
			})

			await this.$http.post('api/index/shareConfig').then(res => {
				console.log("=========")
				console.log(res)
				const {
					name,
					logo,
					h5,
					share_title,
					share_content,
					h5_img,

				} = res
				this.avatar = logo
				this.name = name
				this.h5_img = h5_img
				this.logo = logo
				this.share_title = share_title
				this.share_content = share_content
				// var origin = window.location.origin;
				this.url = h5 + `/h5/?pid=${this.id}`;
			});

			let dom = document.getElementById('box');
			let that = this;
			html2canvas(dom, {
				width: dom.getBoundingClientRect().width, //画布的宽
				height: dom.getBoundingClientRect().height, //画布的高
				//scale: 4, //处理模糊问题
				useCORS: true, //开启跨域，这个是必须的
				scale: 2, // 处理模糊问题
				dpi: 900, // 处理模糊问题
			}).then(canvans => {
				let dataURL = canvans.toDataURL("image/png")
				that.dataURL = dataURL
				console.log(dataURL)
			})

			uni.hideLoading()
		},
		methods: {
			getConfig() {
				this.$http.post('api/index/shareConfig').then(res => {
					const {

						name,
						h5_img
					} = res
					this.h5_img =h5_img
					this.name = name

				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.page{
		position: fixed;
		width: 100%;
		height: 100vh;
		top: 0;
		left: 0;
		display: flex;
		flex-direction: column;
	}
	.box{
		flex: 1;
		margin-top: 20rpx;
		transform: translateX(5%);
		overflow: hidden;
		border-radius: 20rpx;
		width: 90%;
		position: relative;
		&-view{
			height: 100%;
			position: relative;
		}
	}
	.image{
		height: 100%;
		width: 100%;
	}
	.font{
		flex:0 0 60px;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		view:last-of-type{
			color: rgba(173, 172, 172, 1);
			margin-top: 10rpx;
			font-size: 28rpx;
		}
	}
	.dataURL{
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
	}
	.head{
		position: absolute;
		width: 100%;
		padding: 20rpx 0;
		top: 0;
		left: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: transparent;
		z-index: 9;
		image,img{
			width: 100rpx;
			height: 100rpx;
			border-radius: 50%;
			margin: 0 10rpx 0 40rpx;
		}
		.right{
			color: white;
			flex: 1;
			font-size: 28rpx;
			margin-left: 5rpx;
			view:first-of-type{
				font-weight: bold;
			}
			view:last-of-type{
				font-size: 24rpx;
				color: rgba(255,255,255,.8);
			}
		}
	}
	.image{
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
	}
	.qrcode{
		position: absolute;
		width: 200rpx;
		height: 200rpx;
		bottom: 125rpx;
		right: 50rpx;
	}
</style>
